<template>
	<div>
		<el-drawer title="2020-06-19 9:00-11:00 任务详情" :visible.sync="drawer" :before-close="handleClose" :modal-append-to-body="false" size="300px">
			<div class="block">
				<el-timeline >
					<el-timeline-item v-model="this.activities" icon="el-icon-more" type="primary" color="#0bbd87" size="large">
						<p>{{ activities.content }}</p>
						<p>{{activities.stime}}-{{activities.etime}} </p>
					</el-timeline-item>
					<el-timeline-item v-if="activities.status==0" color="#ffaa00">
						<p>未开始</p>
					</el-timeline-item>
					<el-timeline-item v-else-if="activities.status==3" color="#0055ff">
						<p>已经完成</p>
					</el-timeline-item>
					<el-timeline-item v-else color="#aaff00">
						<p>正在进行中</p>
					</el-timeline-item>
					<!-- 这里条件分支没有判断完成   问题在于status的值不一样 -->
				</el-timeline>
			</div>
		</el-drawer>
	</div>
</template>
<script>
import axios from '../../utils/axiosutils.js';
export default {
	props: ['infoId', 'taskId'],
	data() {
		return {
			drawer: false,
			activities: ''
		};
	},
	watch: {
		infoId: function(val) {
			console.log(val);
			axios.get(
				'/todo/getOne',
				resp => {
					console.log(resp);
					this.activities = resp.obj;
				},
				{
					infoId: val
				}
			);
		},
		taskId: function(val) {
			console.log(val);
			axios.get(
				'/task/getOne',
				resp => {
					console.log(resp);
					this.activities = resp.obj;
				},
				{
					taskId: val
				}
			);
		}
	},
	methods: {
		handleClose() {
			this.drawer = false;
		}
	}
};
</script>
<style scoped>
.el-timeline-item{
	margin-top: 5px;
}	
</style>
